<template>
  <el-menu-item index="1" @click="handleClick">实时路况</el-menu-item>
</template>

<script setup>
import { onMounted, getCurrentInstance } from "vue";
import { Query } from "@/api/mapgis-api/Query";
import { setLineStyle } from "@/api/ol-api/index";
const { proxy } = getCurrentInstance();
let map;
/* 1.创建高亮图层,用于显示实时路况数据 */
const trafficConditions_layer = new ol.layer.Vector({
  source: new ol.source.Vector({}),
  zIndex: 999,
});
/* 2.初始化高亮图层 */
onMounted(() => {
  map = proxy.$map;
  map.addLayer(trafficConditions_layer);
});
/* 3.查询mapgis线图层数据,并设置线样式 */
//图层数据
let service = {
  docName: "guanggu",
  layerId: 1,
};

let isOpen = false; //是否打开实时路况
//点击查询mapgis线图层数据;对不同流量的线数据设置样式
const handleClick = () => {
  isOpen = !isOpen;
  if (isOpen) {
    Query.queryByLayerId(service).then((features) => {
      features.forEach((feature) =>
        //   console.log(feature.values_.values_.车流量)
        {
          if (feature.values_.values_.车流量 < 1000) {
            feature.setStyle(setLineStyle({ color: "green", width: 10 }));
          } else if (feature.values_.values_.车流量 < 1500) {
            feature.setStyle(setLineStyle({ color: "yellow", width: 10 }));
          } else {
            feature.setStyle(setLineStyle({ color: "red", width: 10 }));
          }
        }
      );
      trafficConditions_layer.getSource().addFeatures(features);
    });
  } else {
    trafficConditions_layer.getSource().clear();
  }
};
</script>

<style scoped></style>
